<template>
  <div>
    <TopNav :likeItemNumder="likeItemNumder"></TopNav>
    <Title :item="likeItem"></Title>
    <Items :data="data" @selectPrice="startSelect" @ILikeItem="addLike" @toPage="toTagetPage"></Items>
    <Foot></Foot>
  </div>
</template>

<script>
import TopNav from "./components/my-nav.vue";
import Title from "./components/my-title.vue";
import Items from "./components/my-item-list.vue";
import Foot from "./components/my-foot.vue";
import $ from "jquery"

export default {
  data() {
    return {
      data: {
        "pageNumber": 1,
        "pageSum": 0,
        "pageSize": 6,
        "computers": [

        ]
      },
      likeItem:null,
      likeItemNumder:0,
      min:Number.MIN_SAFE_INTEGER,
      max:Number.MAX_SAFE_INTEGER
    }
  },
  name: 'App',
  components: {
    TopNav,
    Title,
    Items,
    Foot,
  },
  created() {
    this.init()
  },
  methods: {
    toTagetPage(num){
      this.data.pageNumber = num
      this.getData()
    },
    addLike(item){
      console.log(item)
      this.likeItem = item
      this.likeItemNumder++
      setTimeout(()=> this.likeItem = null,3000)
    },
    startSelect(min,max){
      this.data = {
        "pageNumber": 1,
        "pageSum": 0,
        "pageSize": 6,
        "computers": [

        ]
      }
      this.min = min != null ? min : this.min
      this.max = max != null ? max : this.max
      this.getData()
    },
    getData() {
      $.ajax({
        type: "get",
        url: "http://localhost:8080/items/ByPrice",
        data: { min:this.min,max:this.max,pageNumber: this.data.pageNumber, pageSize: this.data.pageSize },
        dataType: "json",
        success: (json) => {
          this.data = json
          console.log(json)
        }
      })
    },
    init() {
      $.ajax({
        type: "get",
        url: "http://localhost:8080/items/getAll",
        data: { pageNumber: this.data.pageNumber, pageSize: this.data.pageSize },
        dataType: "json",
        success: (json) => {
          this.data = json
        }
      })
    }
  },
}
</script>

<style>
@import "./../public/style.css";
</style>
